---
title: Input
description: Used to get user input in a text field.
links:
  source: components/input
  storybook: components-input--basic
  recipe: input
---

<ExampleTabs name="input-basic" />

## Anatomy

```jsx
import { Input } from '@saas-ui/react'
```

```jsx
<Input placeholder="..." />
```

## Examples

### Variants

Use the `variant` prop to change the visual style of the input.

<ExampleTabs name="input-with-variants" />

### Sizes

Use the `size` prop to change the size of the input.

<ExampleTabs name="input-with-sizes" />

### Helper Text

Pair the input with the `Field` component to add helper text.

<ExampleTabs name="input-with-helper-text" />

### Error Text

Pair the input with the `Field` component to add error text.

<ExampleTabs name="input-with-error-text" />

### Field

Compose the input with the `Field` component to add a label, helper text, and
error text.

<ExampleTabs name="input-with-field" />

### Left and Right Element

Pair the input with the `InputElement` component to add an element to the left
or right of the input.

<ExampleTabs name="input-with-left-element" />

<ExampleTabs name="input-with-left-and-right-element" />

### Addon

Use the `InputAddon` and `Group` components to add an addon to the input.

<ExampleTabs name="input-with-addon" />

### Disabled

Use the `disabled` prop to disable the input.

<ExampleTabs name="input-with-disabled" />

### Placeholder Style

Use the `_placeholder` prop to style the placeholder text.

<ExampleTabs name="input-with-placeholder-style" />

## Props

<PropTable component="Input" part="Input" />
